
<template>
  <div>
    <el-table
      v-if="visible"
      :data="materialGoodsList"
      highlight-current-row
      style="margin: 3px"
      border
    >
      <el-table-column label="状态" width="100px">
        <template slot-scope="{ row }"
          ><el-tag v-if="row.type === 2">分装前</el-tag>
          <el-tag v-else type="success">分装后</el-tag></template
        >
      </el-table-column>
      <el-table-column
        label="识别码"
        prop="goodsFullCode"
        width="150px"
      />
      <el-table-column label="货号" prop="goodsCode" width="150px" />
      <el-table-column label="货品简称" prop="goodsAbbr" width="120px" />
      <el-table-column label="批号" prop="goodsBatchCode" width="150px" />
      <el-table-column label="浓度" width="120px">
        <template slot-scope="{ row }">
          {{ row.concentration }} {{ row.concentrationUnit }}
        </template>
      </el-table-column>
      <el-table-column label="规格" width="100px">
        <template slot-scope="{ row, $index }">
          <span>{{ row.specification }}/{{ row.unit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划个数" width="100px">
        <template slot-scope="{ row }">
          <el-input v-model="row.expectCount" :disabled="true" />
        </template>
      </el-table-column>
      <el-table-column label="计划数量" width="150px">
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.expectQuantity"
            :disabled="true"
            @blur="handleChangeNumber(productionGoodsList, $index, row, 0)"
          >
            <span slot="append"> {{ row.unit }}</span>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="实际个数" width="100px">
        <template slot-scope="{ row }">
          <el-input
            v-model="row.factCount"
            type="number"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            :disabled="currentStatus"
          />
        </template>
      </el-table-column>
      <el-table-column label="实际数量" width="150px">
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.factQuantity"
            type="number"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            :disabled="currentStatus"
            @blur="handleChangeNumber(productionGoodsList, $index, row, 1)"
          >
            <span slot="append"> {{ row.unit }}</span>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="损耗" width="150px">
        <template slot-scope="{ row, $index }">
          <el-input v-model="row.attritionRate" disabled>
            <!-- <span slot="append"> {{ row.unit }}</span> -->
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!disabled && currentStatus"
        width="120px"
        label="操作"
      >
        <template slot-scope="{ row }">
          <el-tooltip effect="dark" content="复核" placement="top-start">
            <el-checkbox
              v-model="row.checkFlag"
              :disabled="row.checkFlag"
              @change="checkboxChange(row)"
              >确认</el-checkbox
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { updateTaskLog, saveCheckEquipment } from '@/api/mes/manufactureTask.js'
import { newSort, calculateFactQuantity } from '@/utils/common.js'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    goodsList: {
      required: true,
      type: Array
    },
    currentTask: {
      type: Object,
      default: null
    },
    currentStatus: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      tempFrom: {},
      materialGoodsList: [],
      productionGoodsList: [],
      disabled: false,
      checkFlag: false
    }
  },
  computed: {
    visibility: {
      get() {
        return Math.random()
      }
    }
  },
  watch: {
    visibility(data) {
      this.updateGoodsList()
    },
    currentTask: {
      handler(data) {
        // setTimeout(() => {
        //   this.updateGoodsList()
        // }, 300)
      },
      deep: true,
      immediate: true
    },
    goodsList: {
      handler(val) {
        this.updateGoodsList()
      },
      deep: true,
      immediate: true
    },
    materialGoodsList: {
      handler(val) {
        // if (this.materialGoodsList && this.materialGoodsList.length > 0) {
        //   this.materialGoodsList = calculateFactQuantity(
        //     this.materialGoodsList,
        //     'goodsCode'
        //   )
        // }
        if (this.materialGoodsList && this.materialGoodsList.length > 0) {
          const row = {
            manufactureTaskId: this.currentTask.manufactureTaskId,
            goodsList: this.materialGoodsList
          }
          updateTaskLog(row).then((res) => {})
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},

  methods: {
    onkeyup(row) {
      if (row.expectQuantity < row.factQuantity) {
        row.factQuantity = row.expectQuantity
        this.$message.warning('')
        return row
      }
    },
    updateGoodsList() {
      this.materialGoodsList = []
      this.goodsList.forEach((e) => {
        this.materialGoodsList.push(e)
      })
      this.materialGoodsList = newSort(this.materialGoodsList, 'goodsCode')
    },
    handleRemoveProductionGoods(row) {
      if (this.materialGoodsList.length !== 1) {
        this.materialGoodsList.splice(this.materialGoodsList.indexOf(row), 1)
      } else {
        this.$message.warning('最少保留一条封装后的信息')
      }
    },
    handleChangeNumber(list, index, row, type) {
      if (
        row &&
        row.expectQuantity &&
        row.specification &&
        row.specification > 0
      ) {
        if (type === 0) {
          row.expectCount = Math.ceil(row.expectQuantity / row.specification)
          this.$set(list, index, row)
        } else {
          row.factCount = Math.ceil(row.expectQuantity / row.specification)
          this.$set(list, index, row)
        }
      }
      if (this.materialGoodsList && this.materialGoodsList.length > 0) {
        this.materialGoodsList = calculateFactQuantity(
          this.materialGoodsList,
          index,
          this,
          row.goodsCode
        )
      }
    },
    checkboxChange(row) {
      this.materialGoodsList.forEach((e) => {
        if (
          e.goodsCode === row.goodsCode &&
          e.specification === row.specification
        ) {
          if (!e.checkFlag) {
            e.checkFlag = true
          } else {
            return
          }
        } else {
          if (e.checkFlag) {
            e.checkFlag = true
          } else {
            e.checkFlag = false
          }
        }
      })
      const data = {
        manufactureTaskCode: this.currentTask.manufactureTaskCode,
        manufactureTaskId: this.currentTask.manufactureTaskId,
        goodsList: this.materialGoodsList
      }
      saveCheckEquipment(data).then((res) => {
        console.log(res, 'dhdhdhdh')
      })
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
